<script setup>
import { computed, ref } from "vue";
import { data } from "@/config/config";
const person = computed(() => data.person);
const flag = ref(true);

const addClass = function (e) {
  //查找所有元素，删除类 contains
  let list = document.querySelectorAll('.pcontent-left-content');
  list.forEach((element) => {
    if (element.classList.contains('pcontent-left-content-add')) {
      element.classList.remove('pcontent-left-content-add');
    }
  });
  // 为点击元素添加类
  if (e == '企业信息') {
    list[0].classList.add('pcontent-left-content-add');
  } else if (e == '参与投标') {
    list[1].classList.add('pcontent-left-content-add');
  } else if (e == '我的投标') {
    list[2].classList.add('pcontent-left-content-add');
  }
  flag.value = false;
};
// img
const url =
  'https://img1.baidu.com/it/u=4282549135,484680552&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=270'
const srcList = [
  'https://p1.itc.cn/images01/20230417/87b89e3a51874c369b348e813b0ddfd6.png'
];

const opacit = ref(0);
const image = function () {
  opacit.value = 1;
};
const imagee = function () {
  opacit.value = 0;
};



</script>
<template>
  <div class="personbox">
    <div class="ptoubuson">
      <p class="ctp"><a href="">{{ '首页/' }}</a></p><span>{{ person.pwd }}</span>
    </div>
    <div class="pcontent">
      <div class="pcontent-left">
        <!-- <div class="pcontent-left-content" v-for="i in person.personBar" @click="addClass(i)">{{ i }}</div> -->
        <div class="pcontent-left-content" @click="addClass('企业信息')"><img src="../img/个人中心/u673.svg" alt="">企业信息</div>
        <div class="pcontent-left-content" @click="addClass('参与投标')"><img src="../img/个人中心/u674.svg" alt="">参与投标</div>
        <div class="pcontent-left-content" @click="addClass('我的投标')"><img src="../img/个人中心/u675.svg" alt="">我的投标</div>
      </div>
      <div class="pcontent-right">
        <div class="pcontent-top pcontent-right-cotent" v-if="!flag">
          <div class="text"><span>企业名称:</span><span class="textjunior">大连素食有限公司</span>
          </div>
          <div class="text">
            <span>公司注册地址:</span>
            <span class="textjunior">辽宁省大连市金普新区和平路56号</span>
          </div>
          <div class="text">
            <span>机构类型:</span><span class="textjunior">企业机构</span>
          </div>
          <div class="text">
            <span>成立日期: </span><span class="textjunior">2021年-05月13日</span>
          </div>
          <div class="text">
            <span>法人/负责人:</span><span class="textjunior">李华</span>
          </div>
          <div class="text">
            <span>法人负责人身份证扫描件:</span><span class="textjunior images">查看图片<div class="demo-image__preview">
                <el-image @click="image" @close="imagee" style="width: 50px; height: 10px;" :style="{ opacity: opacit }"
                  :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList"
                  :initial-index="4" fit="cover" />
              </div></span>
          </div>
          <div class="text">
            <span>单位联系地址:</span><span class="textjunior">辽宁省大连市金普新区和平路56号</span>
          </div>
          <div class="text">
            <span>经营范围:</span><span class="textjunior">饮食</span>
          </div>
          <div class="text">
            <span>营业执照有效期: </span><span class="textjunior">2021/5/13 -2028/5/13</span>
          </div>
          <div class="text">
            <span>营业执照扫描件:</span><span class="textjunior images">查看图片<div class="demo-image__preview">
                <el-image @click="image" @close="imagee" style="width: 50px; height: 10px;" :style="{ opacity: opacit }"
                  :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList"
                  :initial-index="4" fit="cover" />
              </div></span>
          </div>
          <div class="text">
            <span>开户行:</span><span class="textjunior">大连银行</span>
          </div>
          <div class="text">
            <span>单位注册电话: </span><span class="textjunior">8657-4321</span>
          </div>
          <div class="text">
            <span>注册资本(元) : </span><span class="textjunior">200.00</span>
          </div>
          <div class="text">
            <span>开户许可证/基本户存款信息证:</span><span class="textjunior images">查看图片 <div class="demo-image__preview">
                <el-image @click="image" @close="imagee" style="width: 50px; height: 10px;" :style="{ opacity: opacit }"
                  :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList"
                  :initial-index="4" fit="cover" />
              </div></span>
            <!-- img -->

            <!--  -->
          </div>
        </div>
        <div class="pcontent-right-cotent">
          <div class="text"><span class="textha">统一社会信用代码:</span><span class="textjunior">2024000043245689567</span>
          </div>
          <div class="text"><span class="textha">企业性质:</span><span class="textjunior">私营企业</span></div>
          <div class="text"><span class="textha">法人/负责人身份证: </span><span class="textjunior">331127200011030618</span>
          </div>
          <div class="text"><span class="textha">公司简介:</span><span class="textjunior">大连素食有限公司是一家致力于研究素食美味的公司</span>
          </div>
          <div class="text"><span class="textha">银行账号: </span><span class="textjunior">63299427971907320931709</span>
          </div>
          <div class="text"><span class="textha">实缴资本: </span><span class="textjunior">102.38万元</span></div>
        </div>
        <div class="pcontent-right-moren pcontent-right-cotent" v-if="flag">
          <div><span></span><span></span></div>
          <div><span></span><span></span></div>
          <div><span></span><span></span></div>
          <div><span></span><span></span></div>
          <div><span></span><span></span></div>
        </div>
      </div>

    </div>
  </div>
</template>
<style>
/* img */


.demo-image__preview {
  position: relative;
  top: -18px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.el-image-viewer__btn {
  margin-top: 300px;
}

.el-image-viewer__img {
  width: 700px
}

.textha {
  padding-bottom: 20px;
}

.pcontent-right {
  display: flex;
  font-size: 14px;
}

.textjunior {
  color: #939393;
  margin-left: 15px;
}

.text {
  padding-bottom: 20px;
  display: flex;
}

.pcontent-right {
  padding: 40px 30px;
}

.pcontent-right-cotent {
  display: flex;
  flex-direction: column;
}

.pcontent-left-content {
  width: 200px;
  height: 60px;
  border-radius: 10px;
  line-height: 60px;
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.pcontent-left-content:hover {
  background-color: #fff;
  color: #2dc8b2;
}

.pcontent-left-content-add {
  background-color: #fff;
  color: #2dc8b2;
}

.pcontent {
  display: flex;
  justify-content: center;
}

.pcontent-left {
  box-sizing: border-box;
  min-width: 400px;
  background-color: #17c2aa;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 50px;
}

.pcontent-right {
  min-width: 1000px;
  height: 800px;
  margin-left: 100px;
  background-color: #fff;
  border-radius: 8px;
}

@media screen and (min-width:1200px) {
  .pcontent-left {
    min-width: 300px;
    background-color: #17c2aa;
  }

  .pcontent-right {
    min-width: 700px;
    height: 800px;
    margin-left: 60px;
  }
}

.ptoubuson {
  display: flex;
  align-items: center
}

.personbox {
  width: 85%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ctp {
  color: #999999;
  margin: 25px 0;
}

.images {
  color: aquamarine;
}
</style>